<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>用户后台管理系统</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description"
	content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<!--对话框-->
<link rel="stylesheet" href="js/jconfirm/jquery-confirm.min.css">
<link href="css/style.min.css" rel="stylesheet">

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!--对话框-->
<script src="js/jconfirm/jquery-confirm.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
	<div class="container-fluid p-t-15">

		<div class="row">
			<div class="col-xs-12 col-sm-6" id="one">
				<div class="card">
					<div class="card-header">
						<h4>角色</h4>
					</div>
					<!--搜索用户-->
					<div class="input-group">
						<span class="input-group-btn">
							<button class="btn btn-default" type="button" @click="getRoles()">搜索</button>
						</span> <input type="text" class="form-control" placeholder="请输入用户ID..."
							v-model="uid">
					</div>
					<!--角色-->
					<div class="card-body">
						<div class="example-box">
							<div class="form-group row m-b-10" v-for="roles in arrayData">
								<div class="col-xs-6">{{roles.type}}</div>
								<div class="col-xs-6">
									<label class="lyear-switch switch-primary"> <input
										type="checkbox" v-bind:value="roles.ro_id" v-model="checked">
										<span></span>
									</label>
								</div>

							</div>
						</div>
						<!-- end example-box -->
						<button class="btn btn-label btn-primary" @click="updateRoles()">
							<label><i class="mdi mdi-checkbox-marked-circle-outline"></i></label>
							确认提交
						</button>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-sm-6" id="two">
				<div class="card">
					<div class="card-header">
						<h4>权限</h4>
					</div>
					<!-- 选择角色-->
					<div class="form-group">
						<select class="form-control" id="example-select"
							name="example-select" size="1">
							<optgroup label="请选择角色..."></optgroup>
							<option v-bind:value="roles.ro_id" v-for="roles in arrayRoles"
								@click="showPerms(roles.ro_id)">{{roles.type}}</option>
						</select>
					</div>
					<div class="card-body">
						<div class="example-box">
							<div class="form-group row m-b-10" v-for="perms in arrayData">
								<div class="col-xs-6">{{perms.type}}</div>
								<div class="col-xs-6">
									<label class="lyear-switch switch-solid switch-primary">
										<input type="checkbox" v-bind:value="perms.pe_id"
										v-model="checked"> <span></span>
								</div>
							</div>

						</div>
						<!-- end example-box -->
						<button class="btn btn-label btn-primary" @click="updatePerms()">
							<label><i class="mdi mdi-checkbox-marked-circle-outline"></i></label>
							确认提交
						</button>
					</div>
				</div>
			</div>

		</div>

	</div>
	<script type="text/javascript">
  var one = new Vue({
    el: "#one",
    data: {

      uid: 0,

      arrayData: [],

      checked:[],
    },
    mounted: function () {
      axios.get('rp/allRoles').then(res => {

        this.arrayData=res.data.data;
        two.arrayRoles=this.arrayData;
        console.info(this.arrayData);
      });

    },
    methods: {
      //请求数据
      getRoles: function(){
        const regx = /^\+?[1-9][0-9]*$/; // 正整数
        if (!(regx.test(this.uid))) {
          alert("输入的不是正整数");
          return;
        }
        this.checked = [];
        axios.get('rp/findRolesByUid', {params: {u_id:this.uid}}).then(res => {
          console.info(res.data);
          if(res.data.status=="success"){
            res.data.data.forEach((roles)=>{
              this.checked.push(roles.ro_id);
            })
          }else{
            alert("没有该用户");
          }
        });
      },
      //批量修改
      updateRoles: function()  {
    	  if (this.uid==0 || Object.keys(this.checked).length==0) {
              alert("操作失败");
              return;
            }
        axios.get('rp/updateUserRoles', {params: {u_id:this.uid,ro_ids:this.checked+""}}).then(res => {
          console.info(res.data)
          if(res.data.status=="success"){
            alert("成功修改");
          }else{
            alert("操作失败");
          }
        });
      },
    }
  });


  var two = new Vue({
    el: "#two",
    data: {
      rid: 0,
      arrayRoles: [],

      arrayData: [],

      checked:[],
    },
    mounted: function () {
      axios.get('rp/allPerms').then(res => {
        console.info(res.data.data);
        this.arrayData=res.data.data
      })
    },
    methods: {
      //请求数据
      showPerms: function(rid)  {
        this.rid=rid;
        this.checked = [];
        axios.get('rp/findPermsByRid', {params: {ro_id:rid}}).then(res => {
          console.info(res.data)
          if(res.data.status=="success"){
            res.data.data.forEach((perms)=>{
              this.checked.push(perms.pe_id);
            })
          }else{
            alert("操作失败");
          }
        });
      },
      //批量修改
      updatePerms: function()  {
     	  if (this.rid==0 || Object.keys(this.checked).length==0) {
              alert("操作失败");
              return;
            }
        axios.get('rp/updateRolesPerms', {params: {ro_id:this.rid,pe_ids:this.checked+""}}).then(res => {
          console.info(res.data)
          if(res.data.status=="success"){
            alert("成功修改");
          }else{
            alert("操作失败");
          }
        });
      },
    }
  });

</script>

</body>
</html>